<template>
  <view class="user-info container flex-col">
    <view class="user-info-main flex-grow">
      <u--form
        labelPosition="left"
        :model="formData"
        :rules="rules"
        ref="form"
        labelWidth="70px"
      >
        <u-form-item borderBottom>
          <view class="flex justify-between">
            <u-avatar size="96rpx" :src="avatarUrl"></u-avatar>
            <button
              class="avatar-btn input-color margin-0 flex-center"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
            >
              点击上传头像
            </button>
          </view>
        </u-form-item>
        <u-form-item borderBottom label="昵称" prop="name" required>
          <u--input
            v-model="formData.name"
            border="none"
            maxlength="6"
            placeholderStyle="color:#969dab;"
            placeholder="请输入姓名"
          />
          <u-icon slot="right" name="arrow-right" />
        </u-form-item>
        <u-form-item borderBottom label="电话" prop="phone" required>
          <u--input
            v-model="formData.phone"
            border="none"
            maxlength="11"
            :disabled="true"
            placeholderStyle="color:#969dab;"
            placeholder="请输入电话"
          />
          <!-- <u-icon slot="right" name="arrow-right" /> -->
        </u-form-item>
        <u-form-item
          borderBottom
          label="角色"
          prop="roleId"
          required
          @click="showRole = true"
        >
          <!-- <u--input
            v-model="formData.roleId"
            border="none"
            suffixIcon="arrow-right"
            suffixIconStyle="color: #909399"
            placeholderStyle="color:#969dab;"
            @focus="showRole = true"
            placeholder="请选择角色"
          /> -->
          <view style="width: 100%; text-align: right">{{ roleName }}</view>
          <u-icon slot="right" name="arrow-right" />
        </u-form-item>
      </u--form>
      <view class="hint-text text-note margin-t-24">
        <text>注：</text>填写用用信息
        <text>且填写后不能修改，请务必填写正确！</text>
      </view>
    </view>
    <button
      class="circle-button flex-shrink-0 btn-active"
      @click="submitUserInfo"
    >
      提交保存
    </button>

    <u-action-sheet
      :show="showRole"
      :actions="roleIdList"
      title="请选择角色"
      description="选择不同的角色展示不同用户信息"
      @close="showRole = false"
      @select="roleIdSelect"
    >
    </u-action-sheet>
  </view>
</template>

<script>
import { getObjectAssignProperty } from "@/common/function";
import { updateUserInfo } from "@/api/user";
import { UpdateFilePath } from "@/api/file";
import infoMixin from "@/common/mixins/info";
export default {
  mixins: [infoMixin],
  data() {
    const KEYS = ["name", "phone", "roleId"];

    return {
      avatarUrl: "",
      pickerVisible: false,
      formData: getObjectAssignProperty({}, KEYS, ""),
      showRole: false,
      roleIdList: [
        {
          name: "技师",
          value: "65eea1c262a53e335dc6cb54",
        },
        {
          name: "用户",
          value: "65eea1eb62a53e335dc6cb57",
        },
      ],
      roleName: "",
      rules: {
        name: {
          required: true,
          trigger: "blur",
          pattern: this.$helper.verifyRule.name,
          message: "请输入正确的姓名",
        },
        phone: {
          required: true,
          trigger: "blur",
          pattern: this.$helper.verifyRule.phone,
          message: "请输入正确的手机号",
        },
        roleId: {
          required: true,
          type: "array",
          trigger: ["blur", "change"],
          message: "请选择角色",
        },
      },
    };
  },
  computed: {},
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.form.setRules(this.rules);
    //回显数据
    this.avatarUrl = this.avatar;
    Object.assign(this.formData);
    this.formData.phone = this.userInfo.mobilePhone;
    this.formData.name = this.userInfo.realName;
    this.formData.roleId = this.userInfo.roleId;
    this.roleName = this.roleIdList.find(
      (item) => item.value === this.userInfo.roleId?.[0]
    ).name;
    //设置提交接口(修改/新增)
    this.message = "修改信息";
  },
  methods: {
    async onChooseAvatar({ detail: { avatarUrl } }) {
      this.avatarUrl = avatarUrl;
      this.avatarChange = true;
    },
    // 提交用户信息
    submitUserInfo() {
      if (this.lock) return;
      this.lock = true;
      this.$refs.form
        .validate()
        .then(this._submitRequest)
        .catch(() => (this.lock = false));
    },
    // 发送请求修改用户信息
    async _submitRequest() {
      let isOk = false;
      const duration = 800;
      let params;
      let { message } = this;
      uni.showLoading({ title: "提交中...", mask: true });
      try {
        if (this.avatarChange) {
          const { data: avatar = {} } = await this.$helper.uploadFile(
            UpdateFilePath,
            this.avatarUrl
          );
          if (!avatar.url) throw "上传头像";
          avatar.fileId = Date.now();
          this.formData.avatar = [avatar];

          params = getObjectAssignProperty(this.formData, [
            "name|realName",
            "avatar.0.url|headIcon",
            "roleId|roleId",
          ]);
        } else {
          params = getObjectAssignProperty(this.formData, [
            "name|realName",
            "roleId|roleId",
          ]);
        }

        const updateInfo = updateUserInfo(this.userInfo.id, params).then(
          (res) => {
            message = res.msg;
            this.$store.commit("user/SET_USER_INFO", {
              ...params,
              $assign: true,
            });
          }
        );
        // .finally((res) => {
        //   this.$helper.rollback(duration);
        //   isOk = true;
        //   console.log("res", res);
        //   console.log("isOk", isOk);
        // });
        await Promise.all([updateInfo]).then(() => {
          this.$helper.rollback(duration);
        });
        isOk = true;
      } catch (error) {
        console.log("报错", error);
        if (typeof error == "string") message = error;
        return Promise.reject(error);
      } finally {
        uni.hideLoading();
        this.$message(message, isOk, { auto: false, duration });
      }
    },
    // 完成角色切换
    roleIdSelect(e) {
      this.formData.roleId = [e.value];
      this.roleName = e.name;
      this.$refs.form.validateField("formData.roleId");
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 40rpx 32rpx;

  .input-color {
    color: #969dab;
  }

  .avatar-btn {
    background-color: transparent;
    font-size: 28rpx;

    &::after {
      content: none;
    }
  }

  ::v-deep .u-form {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 16rpx 0;

    &-item {
      padding: 0 30rpx;

      &__body {
        padding: 12px 0;
      }

      &__body__left__content__label {
        margin-left: 8rpx;
      }
    }

    input {
      text-align: right !important;
    }

    .u-icon--right {
      margin-left: 8rpx;
    }
  }

  .circle-button {
    width: 90%;
    margin-bottom: 20rpx;
  }
}

.select-input {
  padding-right: 32rpx;
}
</style>
